<template>

    <div style="width: 100%; display: flex; flex-direction: column;">
        <!-- 上面的内容，靠右对齐 -->
        <div style="display: flex; justify-content: flex-end;">
            <el-button type="primary" :icon="Plus" @click="GetDialog">添加</el-button>
        </div>

        <!-- 下面的内容，靠左对齐 -->
        <div style="display: flex; justify-content: flex-start; margin: 10px;">
            <el-input v-model="query.title" style="width: 200px; margin-right: 10px;" placeholder="请输入名称"
                clearable />
            <el-input v-model="query.code" style="width: 200px; margin-right: 10px;" placeholder="请输入编号"
                clearable />
            <el-button type="primary" :icon="Search" @click="GetData">查询</el-button>
        </div>
    </div>

    <!-- :span-method="objectSpanMethod" -->
    <el-table :data="tableData" row-key="id" default-expand-all ref="tableRef" :border="true"
        :show-overflow-tooltip="true" empty-text="暂无数据" max-height="650px">
        <el-table-column type="selection" prop="id" />
        <el-table-column fixed prop="createDate" label="申请时间" />
        <el-table-column prop="title" label="型号" />
        <el-table-column prop="twotitle" label="名称" />
        <el-table-column prop="code" label="编号" />
    </el-table>
    <!-- 分页组件 -->
    <el-pagination style="margin-top: 20px;" v-model:current-page="query.pageNumber" v-model:page-size="query.pageSize" :page-sizes="[10, 30, 100]"
        size="default" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper"
        :total="total" @update:page-size="handleSizeChange" @update:current-page="handleCurrentChange" />

    <el-dialog v-model="dialogFormVisible" title="添加设备类型" width="500">
        <el-form style="max-width: 600px" label-width="auto" :model="createtype" :rules="rules" ref="ruleFormRef"
            class="demo-ruleForm">
            <el-form-item label="型号" prop="title">
                <el-input v-model="createtype.title" />
            </el-form-item>
            <el-form-item label="名称" prop="twotitle">
                <el-input v-model="createtype.twotitle" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="createtype.description" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Plus, Search } from "@element-plus/icons-vue";
import { addorupdatedevicetypeApi, querydevicetypeListApi } from "../../api/device";
import type { Idevicetype  } from "../../api/device";
import type {ItitleAndcodequery} from '../../types/index'
import { ElMessage } from 'element-plus';
import type { FormInstance } from 'element-plus'
const ruleFormRef = ref<FormInstance>();
const query = ref<ItitleAndcodequery>({
    pageNumber: 1,
    pageSize: 10,
    title: "",
    code: ""
})
const tableData = ref<any>();
const dialogFormVisible = ref(false)
const total = ref<Number>();
const createtype = ref<Idevicetype>({
    id: '00000000-0000-0000-0000-000000000000',
    title: '',
    twotitle:'',
    description: ''
});
const rules = {
    title: [
        { required: true, message: '标题不能为空', trigger: 'blur' }
    ],
};

const handleSizeChange = (val: number) => {
    query.value.pageSize = val
    GetData();
}
const handleCurrentChange = (val: number) => {
    query.value.pageNumber = val
    GetData();
}

const GetData = async () => {
    let res = await querydevicetypeListApi(query.value);
    if (res.statusCode == 200) {
        tableData.value = res.data.items
        total.value = res.data.count
    }
}

const GetDialog = () => {
    dialogFormVisible.value = true
}



const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    // 使用 Promise 包裹 validate 函数，确保可以使用 await
    const valid = await new Promise<boolean>((resolve) => {
        formEl.validate((valid) => {
            if (valid) {
                resolve(true);
            } else {
                resolve(false);
            }
        });
    });
    if (valid) {
        let res = await addorupdatedevicetypeApi('Add', createtype.value);
        if (res.statusCode == 200) {
            dialogFormVisible.value = false
            GetData()
            ElMessage({
                message: res.message,
                type: 'success',
            })
        }
    }
}

onMounted(() => {
    GetData();
})


</script>
<style scoped>
:deep(.el-textarea__inner) {
    outline: none;
    border: none;
    resize: none;
    box-shadow: none;
    background: #F8F8F8;
}

.firstdiv {}

.row-div h2 {
    margin-left: 10px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    /* 让内部元素左右对齐并分开 */
}

.card-span2 {
    font-size: 12px;
}

.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 20px;
}

.pagination-with-border {
    border: 1px solid #e6ebf5;
    border-top: none;
    overflow: hidden;
    padding: 10px;
}
</style>